<template>
  <div class="detail-container">
    <Header />
    <div class="content">
      <button @click="goBack" class="back-btn">← 返回列表</button>
      
      <div class="member-detail-card">
        <h2>{{ currentDeptName }}成员详情</h2>
        
        <div class="detail-section">
          <div class="detail-item">
            <span class="label">序号：</span>
            <span class="value">{{ memberIndex + 1 }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">姓名：</span>
            <span class="value">{{ member.name }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">学号：</span>
            <span class="value">{{ member.studentId }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">学院：</span>
            <span class="value">{{ member.college }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">部门：</span>
            <span class="value">{{ currentDeptName }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">职位：</span>
            <span class="value">{{ member.position }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">联系方式：</span>
            <span class="value">{{ member.phone }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">入社时间：</span>
            <span class="value">{{ member.joinDate }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">负责工作：</span>
            <span class="value">{{ member.responsibility || '无' }}</span>
          </div>
          
          <div class="detail-item">
            <span class="label">备注：</span>
            <span class="value">{{ member.remark || '无' }}</span>
          </div>
        </div>
        
        <div class="operation-buttons">
          <button @click="handleEdit" class="btn-edit">编辑</button>
          <button @click="handleDelete" class="btn-delete">删除</button>
        </div>
      </div>
      
      <div class="member-tasks">
        <h3>负责任务</h3>
        <table class="task-table">
          <thead>
            <tr>
              <th>任务名称</th>
              <th>任务类型</th>
              <th>截止日期</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="task in memberTasks" :key="task.id">
              <td>{{ task.name }}</td>
              <td>{{ task.type }}</td>
              <td>{{ task.deadline }}</td>
              <td :class="`status-${task.status}`">{{ task.status }}</td>
            </tr>
            <tr v-if="memberTasks.length === 0">
              <td colspan="4" class="no-data">暂无任务记录</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const memberId = parseInt(route.params.id)
const deptType = route.params.dept

// 部门名称映射
const deptNameMap = {
  operation: '运营部',
  interview: '采访部',
  photography: '摄影部',
  promotion: '网宣部'
}

// 当前部门名称
const currentDeptName = computed(() => deptNameMap[deptType] || '新媒体中心')

// 当前成员信息
const member = ref({})
const memberIndex = ref(-1)
const memberTasks = ref([])

// 初始化数据
onMounted(() => {
  // 从本地存储获取成员数据
  const savedMembers = localStorage.getItem(`xinmeiti_${deptType}_members`)
  if (savedMembers) {
    const members = JSON.parse(savedMembers)
    const foundMember = members.find(m => m.id === memberId)
    if (foundMember) {
      member.value = foundMember
      memberIndex.value = members.findIndex(m => m.id === memberId)
      // 加载成员任务
      loadMemberTasks()
    } else {
      alert('未找到该成员信息')
      goBack()
    }
  } else {
    alert('未找到成员数据')
    goBack()
  }
})

// 加载成员任务
const loadMemberTasks = () => {
  const savedTasks = localStorage.getItem(`xinmeiti_${deptType}_tasks`)
  if (savedTasks) {
    const tasks = JSON.parse(savedTasks)
    memberTasks.value = tasks.filter(task => task.memberId === memberId)
  }
}

// 返回列表页
const goBack = () => {
  router.push('/buzhang/xinmeiti')
}

// 编辑成员
const handleEdit = () => {
  // 实际项目中应跳转到编辑页面
  alert('编辑功能待实现')
}

// 删除成员
const handleDelete = () => {
  if (confirm(`确定要删除${member.value.name}吗？`)) {
    const savedMembers = localStorage.getItem(`xinmeiti_${deptType}_members`)
    if (savedMembers) {
      let members = JSON.parse(savedMembers)
      members = members.filter(m => m.id !== memberId)
      localStorage.setItem(`xinmeiti_${deptType}_members`, JSON.stringify(members))
      goBack()
    }
  }
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.content {
  flex: 1;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.back-btn {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.member-detail-card {
  background: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

h2 {
  color: #1f2329;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.detail-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.detail-item {
  display: flex;
  margin-bottom: 10px;
}

.label {
  width: 100px;
  font-weight: bold;
  color: #666;
}

.value {
  flex: 1;
  color: #333;
}

.operation-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn-edit {
  background-color: #52c41a;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-delete {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.member-tasks {
  background: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  color: #1f2329;
  margin-top: 0;
  margin-bottom: 20px;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.task-table th, .task-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.task-table th {
  background-color: #f5f7fa;
  font-weight: 500;
}

.status-已完成 {
  color: #52c41a;
}

.status-进行中 {
  color: #faad14;
}

.status-未开始 {
  color: #ff4d4f;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 30px;
}
</style>